<template>
  <div class="homeMain">
    <div class="homeMainCommunity">
      <div class="communityLogo">
        <img src="https://zyl-bolg-1256871043.cos.ap-guangzhou.myqcloud.com/blog2%2FhomeLogo.png">
      </div>
      <div class="communityHr"></div>
      <div class="communityTitle">
        <h2>{{ noticeList.title }}</h2>
        <div class="communityExplain">欢迎访问本站</div>
      </div>
      <div class="communityEntrance">
        <template v-for="(item, index) in guidePageList">
          <div class="entranceBolg zylTransition" v-if="item.title === 'BLOG'" :title="item.brief" @click="jump(item)">{{ item.title }}</div>
          <div class="entranceCsdn zylTransition" v-if="item.title === 'CSDN'" :title="item.brief" @click="jump(item)">{{ item.title }}</div>
          <div class="entranceGitee zylTransition" v-if="item.title === 'GITEE'" :title="item.brief" @click="jump(item)">{{ item.title }}</div>
          <div class="entranceNpm zylTransition" v-if="item.title === 'NPM'" :title="item.brief" @click="jump(item)">{{ item.title }}</div>
        </template>
      </div>
    </div>
    <div class="homeFooterMain">
      <footerIndex style="background-color: transparent"></footerIndex>
    </div>
  </div>
</template>

<script>
import '../assets/scss/home.scss';
import footerIndex from '../components/Footer'
import Interface from './home/serve/api'
export default {
  // 引导页
  name: 'Home',
  components: {
    footerIndex
  },
  data () {
    return {
      guidePageList: [],
      noticeList: '',
    }
  },
  mounted () {
    this.getNavigationStateNavtype();
    this.getZylNoticeAll();
  },
  methods: {
    // 导航
    getNavigationStateNavtype () {
      let params = {
        state: '是',
        navtype: '顶级栏目',
      };
      Interface.getNavigationStateNavtype(params).then(res => {
        if (res.status === 200) {
          this.guidePageList = res.data;
        }
      })
    },

    // 通知公告
    getZylNoticeAll () {
      Interface.getZylNoticeAll().then(res => {
        if (res.status === 200) {
          this.noticeList = res.data[1];
        }
      })
    },

    // 记录栏目访问量
    postNavigationUpdateFlow (id, flow) {
      let params = {
        id: id,
        flow: flow,
      };
      Interface.postNavigationUpdateFlow(params).then(res => {})
    },

    // 跳转
    jump (item) {
      this.postNavigationUpdateFlow(item.id, item.flow);
      switch (item.title) {
        case 'BLOG':
          this.$router.push({
            path: item.navurl
          })
          break
        default:
          window.open(item.navurl, '_blank');
      }
    },
  },
}
</script>
